<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="golden-line line-1"></view>
			<view class="golden-line line-2"></view>
			<view class="golden-circle circle-1"></view>
			<view class="golden-circle circle-2"></view>
			<view class="golden-circle circle-3"></view>
		</view>

		<!-- 管理员信息卡片 -->
		<view class="admin-card">
			<view class="card-bg"></view>
			<view class="admin-header">
				<view class="avatar-section">
					<view class="avatar-ring">
						<image class="avatar" :src="adminInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
					</view>
					<view class="status-indicator"></view>
				</view>
				<view class="admin-info">
					<text class="admin-name">{{ adminInfo.adminName }}</text>
					<view class="role-badge">
						<text class="role-text">管理员</text>
					</view>
					<text class="admin-status">在线</text>
				</view>
				<view class="edit-btn" @click="editProfile">
					<image class="edit-icon" src="/static/编辑.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 激励语句 -->
			<view class="motivation-section">
				<text class="motivation-english">{{ getRandomMotivation().english }}</text>
				<text class="motivation-chinese">{{ getRandomMotivation().chinese }}</text>
			</view>
			
			<!-- 统计数据 -->
			<view class="stats-section">
				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-number">{{ stats.totalStudents }}</text>
						<text class="stat-label">管理学生</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ stats.todayBookings }}</text>
						<text class="stat-label">今日预约</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ stats.pendingBookings }}</text>
						<text class="stat-label">待处理</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<!-- 管理功能菜单 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">管理功能</text>
					<text class="title-line"></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/admin/students')">
					<view class="menu-icon">
						<text class="icon-text">👥</text>
					</view>
					<view class="menu-content">
						<text class="menu-text">学生管理</text>
						<text class="menu-desc">管理学生信息和课时</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/admin/courses')">
					<view class="menu-icon">
						<text class="icon-text">📚</text>
					</view>
					<view class="menu-content">
						<text class="menu-text">课程管理</text>
						<text class="menu-desc">管理课程安排和内容</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/admin/bookings')">
					<view class="menu-icon">
						<text class="icon-text">📅</text>
					</view>
					<view class="menu-content">
						<text class="menu-text">预约管理</text>
						<text class="menu-desc">处理学生预约申请</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/admin/hours')">
					<view class="menu-icon">
						<text class="icon-text">⏰</text>
					</view>
					<view class="menu-content">
						<text class="menu-text">课时管理</text>
						<text class="menu-desc">管理学生课时分配</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
			</view>

			<!-- 系统功能菜单 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">系统功能</text>
					<text class="title-line"></text>
				</view>
				<view class="menu-item" @click="showSettings">
					<view class="menu-icon">
						<text class="icon-text">⚙️</text>
					</view>
					<view class="menu-content">
						<text class="menu-text">系统设置</text>
						<text class="menu-desc">系统配置和维护</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @click="showAbout">
					<view class="menu-icon">
						<text class="icon-text">ℹ️</text>
					</view>
					<view class="menu-content">
						<text class="menu-text">关于系统</text>
						<text class="menu-desc">系统信息和版本</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-btn" @click="handleLogout">
				<image class="logout-icon" src="/static/退出.png" mode="aspectFit"></image>
				<text class="logout-text">退出登录</text>
			</button>
		</view>

		<!-- 编辑资料弹窗 -->
		<view class="edit-modal" v-if="showEditModal">
			<view class="modal-overlay" @click="closeEditModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">编辑资料</text>
					<text class="modal-close" @click="closeEditModal">×</text>
				</view>
				
				<view class="edit-form">
					<view class="form-item">
						<text class="form-label">管理员姓名</text>
						<input class="form-input" v-model="editForm.adminName" placeholder="请输入管理员姓名" />
					</view>
				</view>
				
				<view class="modal-actions">
					<button class="cancel-btn" @click="closeEditModal">取消</button>
					<button class="confirm-btn" @click="saveProfile">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getApiUrl, getRequestConfig } from '@/config/api.js'
	
	export default {
		data() {
			return {
				showEditModal: false,
				adminInfo: {
					adminName: '管理员',
					avatarUrl: ''
				},
				stats: {
					totalStudents: 156,
					todayBookings: 23,
					pendingBookings: 8
				},
				editForm: {
					adminName: ''
				}
			}
		},
		onLoad() {
			this.checkAdminPermission()
			this.loadAdminInfo()
		},
		methods: {
			checkAdminPermission() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || userInfo.role !== 1) {
					uni.showToast({
						title: '无权限访问',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			},
			
			loadAdminInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.adminInfo.adminName = userInfo.name || '管理员'
				}
			},
			
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			editProfile() {
				this.editForm.adminName = this.adminInfo.adminName
				this.showEditModal = true
			},
			
			closeEditModal() {
				this.showEditModal = false
			},
			
			async saveProfile() {
				if (!this.editForm.adminName.trim()) {
					uni.showToast({
						title: '请输入管理员姓名',
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({
					title: '保存中...'
				})
				
				try {
					const token = uni.getStorageSync('token')
					if (!token) {
						throw new Error('未登录')
					}
					
					// 构建更新数据
					const updateData = {
						id: uni.getStorageSync('userInfo').id,
						name: this.editForm.adminName,
						phone: uni.getStorageSync('userInfo').phone || '',
						role: 1 // 管理员角色
					}
					
					const apiUrl = getApiUrl('/api/user/update')
					const requestConfig = getRequestConfig(token, 'PUT', updateData)
					
					const response = await uni.request({
						url: apiUrl,
						method: 'PUT',
						header: requestConfig.header,
						data: updateData
					})
					
					uni.hideLoading()
					
					if (response.data.success) {
						// 更新本地用户信息
						const userInfo = uni.getStorageSync('userInfo')
						userInfo.name = this.editForm.adminName
						uni.setStorageSync('userInfo', userInfo)
						
						// 更新显示
						this.adminInfo.adminName = this.editForm.adminName
						
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						
						this.closeEditModal()
					} else {
						uni.showToast({
							title: response.data.message || '保存失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('保存管理员信息失败:', error)
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					})
				}
			},
			
			showSettings() {
				uni.showActionSheet({
					itemList: ['清除缓存', '检查更新', '系统维护'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.clearCache()
								break
							case 1:
								this.checkUpdate()
								break
							case 2:
								this.systemMaintenance()
								break
						}
					}
				})
			},
			
			clearCache() {
				uni.showModal({
					title: '清除缓存',
					content: '确定要清除缓存吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '清除成功',
								icon: 'success'
							})
						}
					}
				})
			},
			
			checkUpdate() {
				uni.showToast({
					title: '已是最新版本',
					icon: 'success'
				})
			},
			
			systemMaintenance() {
				uni.showModal({
					title: '系统维护',
					content: '系统维护功能开发中',
					showCancel: false
				})
			},
			
			showAbout() {
				uni.showModal({
					title: '关于系统',
					content: '辅导班管理系统 v1.0.0\n\n专业的在线辅导管理平台',
					showCancel: false
				})
			},
			
			handleLogout() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
							
							// 跳转到登录页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						}
					}
				})
			},

			getRandomMotivation() {
				const motivations = [
					{ english: "Success is not final, failure is not fatal: it is the courage to continue that counts.", chinese: "成功不是终点，失败不是致命：坚持才是最重要的。" },
					{ english: "The only way to do great work is to love what you do.", chinese: "只有热爱，才能成就伟大的工作。" },
					{ english: "Your time is limited, don't waste it living someone else's life.", chinese: "你的时间有限，不要浪费时间去过别人的生活。" },
					{ english: "The best way to predict the future is to invent it.", chinese: "预测未来的最好方式是创造它。" },
					{ english: "The future belongs to those who believe in the beauty of their dreams.", chinese: "未来属于那些相信梦想之美的人。" },
					{ english: "Don't watch the clock; do what it does. Keep going.", chinese: "不要看表，做它该做的。继续前进。" },
					{ english: "The only limit to our realization of tomorrow will be our doubts of today.", chinese: "明天实现的唯一限制将是今天的怀疑。" },
					{ english: "The secret of getting ahead is getting started.", chinese: "取得进步的秘诀是开始。" },
					{ english: "The best way to find yourself is to lose yourself in the service of others.", chinese: "找到自己的最佳方式是迷失在为他人服务中。" },
					{ english: "In the middle of every difficulty lies opportunity.", chinese: "在每个困难中都隐藏着机会。" },
					{ english: "The only way to do great work is to love what you do.", chinese: "只有热爱，才能成就伟大的工作。" },
					{ english: "Your time is limited, don't waste it living someone else's life.", chinese: "你的时间有限，不要浪费时间去过别人的生活。" },
					{ english: "The best way to predict the future is to invent it.", chinese: "预测未来的最好方式是创造它。" },
					{ english: "The future belongs to those who believe in the beauty of their dreams.", chinese: "未来属于那些相信梦想之美的人。" },
					{ english: "Don't watch the clock; do what it does. Keep going.", chinese: "不要看表，做它该做的。继续前进。" },
					{ english: "The only limit to our realization of tomorrow will be our doubts of today.", chinese: "明天实现的唯一限制将是今天的怀疑。" },
					{ english: "The secret of getting ahead is getting started.", chinese: "取得进步的秘诀是开始。" },
					{ english: "The best way to find yourself is to lose yourself in the service of others.", chinese: "找到自己的最佳方式是迷失在为他人服务中。" },
					{ english: "In the middle of every difficulty lies opportunity.", chinese: "在每个困难中都隐藏着机会。" }
				];
				const randomIndex = Math.floor(Math.random() * motivations.length);
				return motivations[randomIndex];
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
	position: relative;
	overflow: hidden;
}

.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	
	.golden-line {
		position: absolute;
		background: linear-gradient(to right, #00B8D4, #1976D2);
		opacity: 0.3;
		filter: blur(10px);
		
		&.line-1 {
			width: 100%;
			height: 2px;
			top: 20%;
			left: 0;
		}
		
		&.line-2 {
			width: 100%;
			height: 2px;
			bottom: 20%;
			left: 0;
		}
	}
	
	.golden-circle {
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.1), rgba(25, 118, 210, 0.1));
		border: 1px solid rgba(0, 184, 212, 0.2);
		
		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: 10%;
			right: -100rpx;
		}
		
		&.circle-2 {
			width: 150rpx;
			height: 150rpx;
			bottom: 30%;
			left: -75rpx;
		}
		
		&.circle-3 {
			width: 100rpx;
			height: 100rpx;
			top: 60%;
			right: 10%;
		}
	}
}

.admin-card {
	position: relative;
	margin: 40rpx 20rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
	border-radius: 24rpx;
	box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.4);
	border: 2rpx solid rgba(0, 184, 212, 0.3);
	overflow: hidden;
	z-index: 2;
	
	.card-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.05), rgba(25, 118, 210, 0.05));
		z-index: -1;
	}
	
	.admin-header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		
		.avatar-section {
			position: relative;
			margin-right: 30rpx;
			
			.avatar-ring {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				padding: 6rpx;
				background: linear-gradient(135deg, #00B8D4, #1976D2);
				position: relative;
				
				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 4rpx solid #1A1F2E;
				}
			}
			
			.status-indicator {
				position: absolute;
				bottom: 8rpx;
				right: 8rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #4CAF50;
				border: 3rpx solid #1A1F2E;
				box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.5);
			}
		}
		
		.admin-info {
			flex: 1;
			
			.admin-name {
				display: block;
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 12rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
			
			.role-badge {
				display: inline-block;
				background: linear-gradient(135deg, #00B8D4, #1976D2);
				border-radius: 20rpx;
				padding: 8rpx 20rpx;
				margin-bottom: 12rpx;
				
				.role-text {
					font-size: 24rpx;
					color: #FFFFFF;
					font-weight: 600;
				}
			}
			
			.admin-status {
				font-size: 26rpx;
				color: #AAB4BE;
			}
		}
		
		.edit-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.1), rgba(25, 118, 210, 0.1));
			border: 2rpx solid rgba(0, 184, 212, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.2), rgba(25, 118, 210, 0.2));
			}
			
			.edit-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.motivation-section {
		text-align: center;
		padding: 20rpx 0;
		margin-bottom: 40rpx;
		
		.motivation-english {
			display: block;
			font-size: 28rpx;
			color: #DC143C;
			font-weight: 600;
			font-style: italic;
			text-shadow: 0 2rpx 4rpx rgba(220, 20, 60, 0.5);
			margin-bottom: 8rpx;
		}
		
		.motivation-chinese {
			display: block;
			font-size: 28rpx;
			color: #AAB4BE;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}
	
	.stats-section {
		.stats-grid {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.stat-item {
				flex: 1;
				text-align: center;
				position: relative;
				
				.stat-number {
					display: block;
					font-size: 40rpx;
					color: #00B8D4;
					font-weight: bold;
					margin-bottom: 8rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 184, 212, 0.3);
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}
			
			.stat-divider {
				width: 2rpx;
				height: 60rpx;
				background: linear-gradient(to bottom, transparent, rgba(0, 184, 212, 0.3), transparent);
			}
		}
	}
}

.menu-section {
	margin: 20rpx;
	z-index: 2;
	position: relative;
}

.menu-group {
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	border: 2rpx solid rgba(0, 184, 212, 0.2);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
	
	.group-title {
		padding: 30rpx 30rpx 20rpx;
		position: relative;
		
		.title-text {
			font-size: 32rpx;
			color: #00B8D4;
			font-weight: bold;
			text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
		}
		
		.title-line {
			position: absolute;
			bottom: 0;
			left: 30rpx;
			right: 30rpx;
			height: 2rpx;
			background: linear-gradient(to right, #00B8D4, transparent);
		}
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid rgba(0, 184, 212, 0.1);
		transition: all 0.3s ease;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background: rgba(0, 184, 212, 0.05);
		}
		
		.menu-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			
			.icon-text {
				font-size: 32rpx;
			}
		}
		
		.menu-content {
			flex: 1;
			
			.menu-text {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.menu-desc {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
		
		.menu-arrow {
			font-size: 36rpx;
			color: #00B8D4;
			font-weight: bold;
		}
	}
}

.logout-section {
	margin: 40rpx 20rpx;
	z-index: 2;
	position: relative;
	
	.logout-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.05));
		border: 2rpx solid #f44336;
		border-radius: 50rpx;
		color: #f44336;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
			background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
		}
		
		.logout-icon {
			margin-right: 12rpx;
			width: 40rpx;
			height: 40rpx;
		}
		
		.logout-text {
			font-size: 32rpx;
		}
	}
}

.edit-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	
	.modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10rpx);
	}
	
	.modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 24rpx;
		width: 85%;
		max-width: 650rpx;
		border: 2rpx solid rgba(0, 184, 212, 0.3);
		box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.5);
		overflow: hidden;
		
		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;
			border-bottom: 2rpx solid rgba(0, 184, 212, 0.2);
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.05), rgba(25, 118, 210, 0.05));
			
			.modal-title {
				font-size: 36rpx;
				color: #00B8D4;
				font-weight: bold;
				text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
			}
			
			.modal-close {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(0, 184, 212, 0.1);
				border: 1rpx solid rgba(0, 184, 212, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				color: #AAB4BE;
				line-height: 1;
				transition: all 0.3s ease;
				
				&:active {
					background: rgba(0, 184, 212, 0.2);
					color: #00B8D4;
				}
			}
		}
		
		.edit-form {
			padding: 40rpx;
			
			.form-item {
				margin-bottom: 40rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.form-label {
					display: block;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
					font-weight: 600;
				}
				
				.form-input {
					width: 100%;
					height: 90rpx;
					background: rgba(255, 255, 255, 0.05);
					border-radius: 16rpx;
					padding: 0 30rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					border: 2rpx solid rgba(0, 184, 212, 0.3);
					box-sizing: border-box;
					transition: all 0.3s ease;
					
					&:focus {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.05);
						box-shadow: 0 0 20rpx rgba(0, 184, 212, 0.3);
					}
				}
			}
		}
		
		.modal-actions {
			display: flex;
			gap: 24rpx;
			padding: 40rpx;
			border-top: 2rpx solid rgba(0, 184, 212, 0.2);
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.02), rgba(25, 118, 210, 0.02));
			
			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 90rpx;
				border-radius: 45rpx;
				font-size: 30rpx;
				font-weight: 600;
				border: none;
				transition: all 0.3s ease;
			}
			
			.cancel-btn {
				background: rgba(255, 255, 255, 0.05);
				color: #AAB4BE;
				border: 2rpx solid rgba(0, 184, 212, 0.3);
				
				&:active {
					background: rgba(0, 184, 212, 0.1);
					color: #00B8D4;
				}
			}
			
			.confirm-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				color: #FFFFFF;
				box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.4);
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 3rpx 12rpx rgba(25, 118, 210, 0.6);
				}
			}
		}
	}
}
</style> 